<template>
	<view class="flex justify-between align-center padding-sm bg-fff btm">
		<view class="">
			<image class="box" :src="shopData.pathList[randNum]" mode=""></image>
		</view>
		<view class="padding-sm">
			<view class="mz">
				{{shopData.shopname}}
			</view>
			<image class="tubiao" src="https://m.kuaizhuanpu.com/phone/images/rzico_01.png" mode=""></image>
			<view class="">
				{{shopData.cityArea}}
			</view>
			<view class="">
				面积：<text class="col">{{shopData.acrage}}</text>平方米
			</view>
			<view class="">
				租金：<text class="col">{{shopData.rent}}</text>元/月
			</view>
			<view class="">
				转让费：<text class="col">{{Math.round(Math.random()*8+3)}}</text>万元
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"GoodsList",
		props: {
			shopData:{
				type:Object,
				required:true
			}
		},
		data() {
			return {
				randNum:Math.round(Math.random()*2)
			};
		}
	}
</script>

<style lang="scss">
.btm{
	border-bottom: 1px solid #eee;
	position: relative;
	.box{
		width: 274rpx;
		height: 206rpx;
	}
	.mz{
		font-weight: bolder;
		width: 380rpx;
		font-size: 28rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.tubiao{
		width: 28upx;
		height: 26upx;
		position: absolute;
		top: 48upx;
		right: 20upx;
	}
	.col{
		color: #db191e;
		font-weight: bolder;
	}
}
</style>
